import React, {FC, useEffect, useState} from "react";
import useQuestion from "../../../hooks/useQuestion";
import styles from "./index.module.scss";
import EditCanvas from "./EditCanvas";
import {Spin} from "antd";
// todo 当我们需要进行组件复用的时候,我们可以实现自定义的hook

//整体是上下结构
//内部是左中右的结构吧

const  Edit: FC =()=>{
    // const {id=''} = useParams();

     const {loading} =useQuestion();


    if (loading) {
        return (
            <div style={{ textAlign: 'center', marginTop: '24px' }}>
                <Spin />
            </div>
        )
    }

    return(
       <div className={styles.container} >
           {/*<p>编辑页面</p>*/}
           {/* <div>*/}
           {/*     {loading ?<p>loading</p>:<p>{JSON.stringify(data)}</p>}*/}
           {/* </div>*/}
           <div>header</div>
           <div className={styles['container-wrapper']}>
            <div className={styles.content}>
                <div className={styles.left}>left</div>
                <div className={styles.main}>
                    <div className={styles.canvs}>
                     <EditCanvas loading={loading } />
                </div>
                </div>
                <div className={styles.right}>right</div>
            </div>
           </div>
       </div>
    );
}
export default Edit;